<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 标签 选择器*/
        a:link    {color:green;}
        a:visited {color:yellow;}
        a:hover   {color:black;}
        a:active  {color:blue;}

        /* id 和 class 选择器
         ID属性不要以数字开头
          类名的第一个字符不能使用数字
        */
        #para1 {
            text-align:center;
            color:red;
        }
        .center {
            text-align:center;
        }
       /* 所有的 p 元素使用 class="center" 让该元素的文本居中:*/
        p.center {text-align:center;}
       /* 第四种选择器即直接在标签内部写css代码。

       第四种 > id > class > 标签

       属性选择器：语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例

        包含选择器：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}.
                    允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式
       */
        p{
            color:red;
        }
        div p{
            color:yellow;
        }
        /*子选择器:强制指定目标选择器作为 包含选择器对应的标签 内部的标签     A>B{...}
        例：以下div内的p标签匹配样式，div内的table内的p不匹配*/
        div>span{
            color:red;
        }
        /*兄弟选择器
            A~B{...}
        */
        div~p{
            color:red;
        }
    </style>
</head>
<body>
    <!--
    HTML 标签原本被设计为用于定义文档内容结构

    CSS 指层叠样式表 (Cascading Style Sheets)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题-->

    <a href="http://www.w3cschool.cc"
          target="_blank">标签选择器</a>


    <div id="para1">id选择器，居中 红色</div>
    <div class="center">class选择器  居中</div>
    <p class="center">p.center</p>


    <p>red text红色</p><!--文字是红色的-->
    <div>
        <p>yellow text黄色</p><!--文字是黄色的-->
    </div>

    <div>
        <span>文字是红色的</span><!--文字是红色的-->
        <table>
            <tr>
                <td>
                    <span>文字是非红色的</span><!--文字是非红色的-->
                </td>
            </tr>
        </table>
    </div>

    <div>
        <p>no red text</p><!--文字是非红色的-->
        <div>no red text</div>
        <p>red text</p><!--文字是红色的-->
    </div>

<!--    多重样式优先级
    一般情况下，优先级如下：
            （内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
    注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。


    优先级顺序   下列是一份优先级逐级增加的选择器列表：
            通用选择器（*）
            元素(类型)选择器
            类选择器
            属性选择器
            伪类
            ID 选择器
            内联样式

            !important 规则例外:当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.
                一些经验法则：
                    Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
                    Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
                    Never 永远不要在全站范围的 css 上使用 !important
                    Never 永远不要在你的插件中使用 !important
         解释：
            1. 内联样式表的权值最高 1000；
            2. ID 选择器的权值为 100
            3. Class 类选择器的权值为 10
            4. HTML 标签选择器的权值为 1

        利用选择器的权值进行计算比较，em 显示蓝色，示例如下：https://c.runoob.com/codedemo/3048
        CSS 优先级法则：
            A 选择器都有一个权值，权值越大越优先；
            B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
            C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
            D 继承的CSS 样式不如后来指定的CSS 样式；
            E 在同一组属性设置中标有"!important"规则的优先级最大；
    -->


</body>
</html>